<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0072)pay.html?selectedItemSpecIds=cake-1004-spec-1 -->
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0 ,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>结算页面</title>
	<link rel="shortcut icon" href="img/foodie.ico">
	<link href="static/css/amazeui.css" rel="stylesheet" type="text/css">
	<link href="static/css/demo.css" rel="stylesheet" type="text/css">
	<link href="static/css/cartstyle.css" rel="stylesheet" type="text/css">
	<link href="static/css/jsstyle.css" rel="stylesheet" type="text/css">
	<link href="static/css/lee.css" rel="stylesheet" type="text/css">
</head>

<body style="overflow: visible;">
	<div id="container">
		<!--顶部导航条 -->
		<div class="am-container header">
			<ul class="message-l">
				<div class="topMessage">
					<div class="menu-hd" v-if="isLogin">
						{{username}},欢迎您
					</div>
					<div class="menu-hd" v-else>
						亲，请<a href="login.html" target="_top" class="h">登录</a>
						<a href="register.html" target="_top">免费注册</a>
					</div>
				</div>
			</ul>
			<ul class="message-r">
				<div class="topMessage home">
					<div class="menu-hd"><a href="index.html" target="_top" class="h">商城首页</a></div>
				</div>
				<div class="topMessage my-shangcheng">
					<div class="menu-hd MyShangcheng">
						<a href="user-center.html" target="_top"><i class="am-icon-user am-icon-fw"></i>个人中心</a>
					</div>
				</div>
				<div class="topMessage mini-cart">
					<div class="menu-hd">
						<a id="mc-menu-hd" href="shopcart.html" target="_top">
							<i class="am-icon-shopping-cart  am-icon-fw"></i>
							<span>购物车</span>
							<strong id="J_MiniCartNum" class="h"></strong>
						</a>
					</div>
				</div>
			</ul>
		</div>
		<!--悬浮搜索框-->
		<div class="nav white">
			<div class="logo"><img src="static/images/logo.png" /></div>
			<div class="logoBig">
				<li><img src="static/images/logobig.png" /></li>
			</div>
			<div class="search-bar pr">
				<a name="index_none_header_sysc" href="#"></a>
				<form>
					<input id="searchInput" name="index_none_header_sysc" type="text" placeholder="搜索"
						autocomplete="off">
					<input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" type="submit">
				</form>
			</div>
		</div>
		<div class="clear"></div>
		<div class="concent" style="margin-top: 35px;">
			<div class="paycont">
				<div class="address">
					<h3>确认收货地址 </h3>
					<div class="control selected">
						<div class="tc-btn createAddr theme-login am-btn am-btn-danger"><a
								href="user-center.html">使用新地址</a></div>
					</div>
					<div class="clear"></div>
					<ul>
						<span style="">
							<template v-for="addr,index in addrs">
								<li :class="{'user-addresslist':true, 'defaultAddr':index==addrIndex}"
									style="margin-top: 6px;" @click="chooseAddr" :data-index="index">
									<div class="address-left">
										<div class="user DefaultAddr">
											<span class="buy-address-detail">
												<span class="buy-user">{{addr.receiverName}}</span>
												<span class="buy-phone">{{addr.receiverMobile}}</span>
											</span>
										</div>
										<div class="default-address DefaultAddr">
											<span class="buy-line-title buy-line-title-type">收货地址：</span>
											<span class="buy--address-detail">
												<span class="province">{{addr.provinceName}}</span>
												<span class="city">{{addr.cityName}}</span>
												<span class="dist">{{addr.areaName}}</span>
												<span class="street">{{addr.address}}</span>
											</span>
										</div>
										<ins class="deftip" v-if="addr.commonAddr==1">默认地址</ins>
									</div>
									<div class="address-right">
										<a href="person/address.html"><span
												class="am-icon-angle-right am-icon-lg"></span></a>
									</div>
									<div class="clear"></div>
									<div class="new-addr-btn">
										<a href="javascript:void(0);" class="hidden">设为默认</a> <span
											class="new-addr-bar hidden">|</span>
										<a href="javascript:void(0);">编辑</a> <span class="new-addr-bar">|</span>
										<a href="javascript:void(0);">删除</a>
									</div>
								</li>
							</template>

						</span>
					</ul>
					<div class="clear"></div>
				</div>
				<!-- 支付方式 -->
				<div class="logistics">
					<h3>选择支付方式</h3>
					<ul class="pay-list">
						<li style="width: 100px; height: 40px; padding: 3px;" :class="{'selected':payType==1}"
							@click="changePayType(1)">
							<img src="static/images/weizhifu.jpg" style="width: 70px; height: 34px;">
							<span></span>
						</li>
						<li style="width: 100px; height: 40px; padding: 3px;" :class="{'selected':payType==2}"
							@click="changePayType(2)">
							<img src="static/images/zhifubao.jpg" style="width: 70px; height: 34px;">
							<span></span>
						</li>
					</ul>
				</div>
				<div class="clear"></div>
				<!-- 订单信息 -->
				<div class="concent">
					<div id="payTable">
						<h3>确认订单信息</h3>
						<div class="cart-table-th">
							<div class="wp">
								<div class="th th-item">
									<div class="td-inner">商品信息</div>
								</div>
								<div class="th th-price">
									<div class="td-inner">单价</div>
								</div>
								<div class="th th-amount">
									<div class="td-inner">数量</div>
								</div>
								<div class="th th-sum">
									<div class="td-inner">金额</div>
								</div>
								<div class="th th-oplist">
									<div class="td-inner">配送方式</div>
								</div>
							</div>
						</div>
						<div class="clear"></div>
						<div class="bundle  bundle-last">
							<template v-for="sc in shopCarts">
								<div class="bundle-main">
									<ul class="item-content clearfix">
										<div class="pay-phone">
											<li class="td td-item">
												<div class="item-pic">
													<a href="item.html?itemId=cake-1004" target="_blank"
														class="J_MakePoint"><img :src="'static/pimgs/'+sc.productImg"
															class="itempic J_ItemImg"
															style="width: 80px; height: 80px;"></a>
												</div>
												<div class="item-info">
													<div class="item-basic-info">
														<a href="item.html?itemId=cake-1004" target="_blank"
															data-point="tbcart.8.11"
															class="item-title J_MakePoint">{{sc.productName}}
															{{sc.skuName}}</a>
													</div>
												</div>
											</li>
											<li class="td td-info">
												<div class="item-props"><span class="sku-line">{{sc.skuProps}}</span>
												</div>
											</li>
											<li class="td td-price">
												<div class="item-price price-promo-promo">
													<div class="price-content"><em
															class="J_Price price-now">{{sc.sellPrice}}</em></div>
												</div>
											</li>
										</div>
										<li class="td td-amount">
											<div class="amount-wrapper ">
												<div class="item-amount "><span class="phone-title">购买数量</span>
													<div class="sl">{{sc.cartNum}}</div>
												</div>
											</div>
										</li>
										<li class="td td-sum">
											<div class="td-inner"><em tabindex="0"
													class="J_ItemSum number">{{sc.sellPrice*sc.cartNum}}</em></div>
										</li>
										<li class="td td-oplist">
											<div class="td-inner"><span class="phone-title">配送方式</span>
												<div class="pay-logis">
													包邮
												</div>
											</div>
										</li>
									</ul>
									<div class="clear"></div>
								</div>
							</template>

						</div>
						<div class="clear"></div>
					</div>
				</div>
				<div class="clear"></div>
				<div class="pay-total">
					<div class="order-extra">
						<div class="order-user-info">
							<div id="holyshit257" class="memo"><label>买家留言：</label>
								<input type="text" title="选填, 可写备注" placeholder="选填, 可写备注" v-model="orderRemark"
									class="memo-input J_MakePoint c2c-text-default memo-close">
								<div class="msg hidden J-msg">
									<p class="error">最多输入500个字符</p>
								</div>
							</div>
						</div>
					</div>
					<div class="clear"></div>
				</div>
				<div class="buy-point-discharge ">
					<p class="price g_price ">
						合计（包邮）
						<em class="pay-sum">¥{{totalPrice}}</em>
					</p>
				</div>
				<div class="order-go clearfix">
					<div class="pay-confirm clearfix">
						<div class="box">
							<div tabindex="0" id="holyshit267" class="realPay"><em class="t">实付款：</em>
								<span class="price g_price ">
									<em id="J_ActualFee" class="style-large-bold-red ">¥{{totalPrice}}</em>
								</span>
							</div>
							<div id="holyshit268" class="pay-address">
								<p class="buy-footer-address"><span
										class="buy-line-title buy-line-title-type">寄送至：</span>
									<span class="buy--address-detail">
										<span class="province">{{addrs[addrIndex].provinceName}}</span>
										<span class="city">{{addrs[addrIndex].cityName}}</span>
										<span class="dist">{{addrs[addrIndex].areaName}}</span>
										<span class="street">{{addrs[addrIndex].address}}</span>
									</span>
								</p>
								<p class="buy-footer-address">
									<span class="buy-line-title">收货人：</span>
									<span class="buy-address-detail">
										<span class="buy-user">{{addrs[addrIndex].receiverName}}</span>
										<span class="buy-phone">{{addrs[addrIndex].receiverMobile}}</span>
									</span>
								</p>
							</div>
						</div>
						<div id="holyshit269" class="submitOrder">
							<div class="go-btn-wrap">
								<a id="J_Go" href="#" tabindex="0" title="点击此按钮，提交订单" class="btn-go"
									@click="doSubmit">提交订单</a>
							</div>
						</div>
						<div class="clear"></div>
					</div>
				</div>
			</div>
			<div class="clear"></div>
		</div>
		<!--底部 -->
		<div class="footer ">
			<div class="footer-hd ">
				<p>
					<a href="# ">菜狗商城</a>
					<b>|</b>
					<a href="# ">商城首页</a>
					<b>|</b>
					<a href="# ">支付宝</a>
					<b>|</b>
					<a href="# ">物流</a>
				</p>
			</div>
			<div class="footer-bd ">
				<p>
					<a href="# ">关于菜狗</a>
					<a href="# ">合作伙伴</a>
					<a href="# ">联系我们</a>
					<a href="# ">网站地图</a>
					<em>©xujiu.com 版权所有</em>
				</p>
			</div>
		</div>
		<div class="theme-popover-mask" style="display: none; height: 763px;"></div>
		<div class="clear"></div>
	</div>
	<script type="text/javascript" src="static/js/utils.js"></script>
	<script type="text/javascript" src="static/js/cookie_utils.js"></script>
	<script type="text/javascript" src="static/js/axios.min.js"></script>
	<script type="text/javascript" src="static/js/vue.js"></script>
	<script type="text/javascript" src="static/js/base.js"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el: "#container",
			data: {
				cartIds: "",
				addrs: [],
				shopCarts: [],
				addrIndex: 0,  //用户选择的地址的索引（默认值和当前用户地址的默认地址索引相同）
				totalPrice: 0,
				payType: 1,  //1 微信支付   2 支付宝
				orderRemark: "",
				isLogin: false,
				username:"",
			},
			created: function () {
				var cartIdss = getUrlParam("cids");
				var arr1 = cartIdss.split("#");
				this.cartIds = arr1[0];
				console.log(this.cartIds);

				//1.根据当前用户id查询收货地址信息
				var userId = getCookieValue("userId");
				var token = getCookieValue("token");
				if (token != null && token != "") {
					this.isLogin = true;
					this.username = getCookieValue("username");
				}
				var url1 = baseUrl + "useraddr/list";
				axios({
					url: url1,
					method: "get",
					params: {
						userId: userId
					},
					headers: {
						token: token
					}
				}).then((res) => {
					if (res.data.code == 401) {
						//跳转登录
					} else if (res.data.code == 200) {
						//请求成功  [{commonType:0},{commonType:1}]
						this.addrs = res.data.data;

						//this.addrIndex的值 等于 当前用户的默认收货地址的索引
						for (var i = 0; i < this.addrs.length; i++) {
							if (this.addrs[i].commonAddr == 1) {
								this.addrIndex = i;
							}
						}
					}
				});


				//2.根据this.cartIds查询当前订单中的商品信息
				var url2 = baseUrl + "shopcart/listbycids";
				axios({
					url: url2,
					method: "get",
					params: {
						cids: this.cartIds
					},
					headers: {
						token: token
					}
				}).then((res) => {
					if (res.data.code == 401) {
						//跳转登录
					} else if (res.data.code == 200) {
						//请求成功
						this.shopCarts = res.data.data;
						for (var i = 0; i < this.shopCarts.length; i++) {
							this.totalPrice = this.totalPrice + this.shopCarts[i].cartNum * this.shopCarts[i].sellPrice;
						}
					}
				});
			},
			methods: {
				chooseAddr: function (event) {
					this.addrIndex = event.srcElement.dataset.index;
				},
				changePayType: function (m) {
					this.payType = m;
				},
				doSubmit: function () {
					//将订单信息提交到：添加订单接口
					//1.准备订单数据
					var address = this.addrs[this.addrIndex].provinceName + " " + this.addrs[this.addrIndex].cityName + " "
						+ this.addrs[this.addrIndex].areaName + " " + this.addrs[this.addrIndex].address;
					var order = {
						"actualAmount": this.totalPrice,
						"orderRemark": this.orderRemark,
						"payType": this.payType,
						"receiverAddress": address,
						"receiverMobile": this.addrs[this.addrIndex].receiverMobile,
						"receiverName": this.addrs[this.addrIndex].receiverName,
						"totalAmount": this.totalPrice,
						"userId": getCookieValue("userId")
					};
					//2.提交订单
					var url3 = baseUrl + "order/add";
					axios({
						url: url3,
						method: "post",
						headers: {
							token: getCookieValue("token")
						},
						params: {
							cids: this.cartIds
						},
						data: order
					}).then((res) => {
						if (res.data.code == 200) {
							//跳转到支付页面显示支付二维码
							var orderInfo = res.data.data; // {orderId:"123123",productNames:"aseraer",payUrl:"weixin://...."}
							orderInfo.totalPrice = this.totalPrice; // {orderId:"123123",productNames:"aseraer",payUrl:"weixin://....",totalPrice:18.8}

							localStorage.setItem("orderInfo", JSON.stringify(orderInfo));
							window.location.href = "order-pay.html";
						} else if (res.data.code == 401) {
							window.location.href = "login.html";
						} else {
							alert(res.data.msg);
						}
					});
				}
			}
		});

	</script>

</body>

</html>